<template>
  <div class="image-cropper-component">
    <!-- 上传区域 -->
    <div class="upload-container">
      <!-- 已上传图片预览 -->
      <div v-if="imageUrl && showPreview" class="image-preview-container">
        <div class="image-preview" :style="{ width: previewWidth, height: previewHeight }">
          <img 
            :src="getDisplayImageUrl(imageUrl)" 
            alt="预览图片" 
            class="preview-image"
            @load="onImageLoad"
            @error="onImageError"
            v-loading="imageLoading"
            element-loading-text="图片加载中..."
          />
          <div class="image-overlay">
            <div class="overlay-actions">
              <el-button 
                type="primary" 
                size="small" 
                icon="el-icon-edit"
                @click="openCropper"
                class="edit-btn">
                重新裁剪
              </el-button>
              <el-button 
                type="danger" 
                size="small" 
                icon="el-icon-delete"
                @click="removeImage"
                class="remove-btn">
                删除
              </el-button>
            </div>
          </div>
        </div>
        <div class="image-info" :class="{ error: imageError }">
          <span v-if="imageError" class="error-icon">⚠️</span>
          <span class="image-size">{{ getImageSize() }}</span>
        </div>
      </div>
      
      <!-- 上传按钮 -->
      <el-upload 
        v-else
        action="#" 
        :http-request="requestUpload" 
        :show-file-list="false" 
        :before-upload="beforeUpload"
        accept="image/*"
        class="upload-area">
        <div class="upload-content">
          <div class="upload-icon-wrapper">
            <i class="el-icon-plus upload-icon"></i>
          </div>
          <div class="upload-text">点击上传图片</div>
          <div class="upload-tip">{{ uploadTip }}</div>
        </div>
      </el-upload>
      
      <!-- 上传状态提示 -->
      <div class="upload-status" v-if="!imageUrl">
        <i class="el-icon-info status-icon"></i>
        <span>{{ placeholderText }}</span>
      </div>
    </div>

    <!-- 图片裁剪对话框 -->
    <el-dialog 
      :title="cropperTitle" 
      :visible.sync="cropperOpen" 
      :width="dialogWidth" 
      append-to-body 
      @opened="modalOpened" 
      @close="closeCropperDialog" 
      class="cropper-dialog">
      <div class="cropper-container" :style="{height: cropperHeight + 'px'}">
        <vue-cropper
          ref="cropper"
          :img="cropperOptions.img"
          :info="true"
          :autoCrop="cropperOptions.autoCrop"
          :autoCropWidth="cropperOptions.autoCropWidth"
          :autoCropHeight="cropperOptions.autoCropHeight"
          :fixedBox="cropperOptions.fixedBox"
          :outputType="cropperOptions.outputType"
          :centerBox="true"
          :high="true"
          :canMove="true"
          :canMoveBox="true"
          :original="false"
          v-if="cropperVisible"
        />
      </div>
      
      <div class="cropper-tools">
        <el-row :gutter="15" type="flex" justify="space-between" align="middle">
          <el-col :span="6">
            <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
              <el-button size="small" type="primary" icon="el-icon-upload">
                选择图片
              </el-button>
            </el-upload>
          </el-col>
          <el-col :span="12">
            <div class="cropper-controls">
              <el-button icon="el-icon-plus" size="small" @click="changeScale(1)" title="放大"></el-button>
              <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)" title="缩小"></el-button>
              <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()" title="向左旋转"></el-button>
              <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()" title="向右旋转"></el-button>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="cropper-actions">
              <el-button type="success" size="small" @click="uploadImg()" icon="el-icon-check">确 定</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper"
import { debounce } from '@/utils'
import { BASE_FILE_URL, BASE_API } from '@/utils/constants'

export default {
  name: "ImageCropper",
  components: { VueCropper },
  props: {
    // 是否自动拼接图片URL
    autoAppendUrl: {
      type: Boolean,
      default: true
    },
    // 图片URL前缀
    imageUrlPrefix: {
      type: String,
      default: ''
    },
    // 图片URL
    value: {
      type: String,
      default: ''
    },
    // 裁剪器配置
    cropperConfig: {
      type: Object,
      default: () => ({
        autoCrop: true,
        autoCropWidth: 375,
        autoCropHeight: 210,
        fixedBox: false,
        outputType: "png"
      })
    },
    // 对话框宽度
    dialogWidth: {
      type: String,
      default: '700px'
    },
    // 裁剪器高度
    cropperHeight: {
      type: Number,
      default: 400
    },

    // 上传提示文字
    uploadTip: {
      type: String,
      default: '支持 JPG、PNG 格式，建议尺寸 375x210'
    },
    // 占位符文字
    placeholderText: {
      type: String,
      default: '请上传图片'
    },
    // 裁剪器标题
    cropperTitle: {
      type: String,
      default: '图片裁剪'
    },
    // 文件大小限制（MB）
    maxFileSize: {
      type: Number,
      default: 5
    },
    // 是否显示图片预览
    showPreview: {
      type: Boolean,
      default: true
    },
    // 预览图片宽度
    previewWidth: {
      type: String,
      default: '240px'
    },
    // 预览图片高度
    previewHeight: {
      type: String,
      default: '135px'
    },
  },
  data() {
    return {
      // 图片URL
      imageUrl: this.value,
      // 裁剪对话框显示状态
      cropperOpen: false,
      // 裁剪器显示状态
      cropperVisible: false,
      // 裁剪器配置
      cropperOptions: {
        img: "",
        autoCrop: this.cropperConfig.autoCrop,
        autoCropWidth: this.cropperConfig.autoCropWidth,
        autoCropHeight: this.cropperConfig.autoCropHeight,
        fixedBox: this.cropperConfig.fixedBox,
        outputType: this.cropperConfig.outputType,
        filename: "image"
      },

      // 窗口大小调整处理器
      resizeHandler: null,
      // 裁剪器初始化防抖处理器
      initCropperDebounced: null,
      // 裁剪后的图片blob
      croppedImageBlob: null,
      // 图片尺寸信息
      imageDimensions: null,
      // 图片加载状态
      imageLoading: false,
      // 图片加载错误
      imageError: false,
      // 图片尺寸缓存
      imageSizeCache: new Map(),
      // 是否为新建图片（用于区分新建和编辑）
      isNewImage: false
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.imageUrl = newVal
      },
      immediate: true
    },
    imageUrl: {
      handler(newVal) {
        console.log('newVal', newVal)
        this.$emit('input', newVal)
      }
    },
    'cropperOptions.img': {
      handler(newImg, oldImg) {
        // 只有当图片URL真正改变时才处理
        if (newImg !== oldImg) {
          console.log('裁剪器图片URL变化:', newImg)
          // 使用防抖处理裁剪器刷新
          if (this.cropperVisible && this.$refs.cropper) {
            this.initCropperDebounced()
          }
        }
      }
    }
  },
  created() {
    // 创建防抖的裁剪器初始化方法
    this.initCropperDebounced = debounce(() => {
      this.initCropper()
    }, 100)
  },
  beforeDestroy() {
    // 清理事件监听器
    if (this.resizeHandler) {
      window.removeEventListener("resize", this.resizeHandler)
      this.resizeHandler = null
    }
    
    // 清理防抖方法
    if (this.initCropperDebounced && this.initCropperDebounced.cancel) {
      this.initCropperDebounced.cancel()
    }
    
    // 清理缓存
    this.imageSizeCache.clear()
  },
  methods: {
    /** 拼接完整的图片URL */
    getFullImageUrl(imageUrl) {
      if (!imageUrl) return '';

      // 如果已经是http/https/base64开头，直接返回
      if (/^(http|https):\/\//.test(imageUrl) || imageUrl.startsWith('data:image/')) {
        return imageUrl;
      }

      // 如果设置了自定义前缀，使用自定义前缀
      if (this.imageUrlPrefix) {
                              console.log('BASE_API2', this.imageUrlPrefix)

        return this.imageUrlPrefix + imageUrl;  
      }

      // 兼容斜杠
      if (imageUrl.startsWith('/')) {
       console.log('BASE_API1', BASE_API)
        return BASE_API + imageUrl;
      }
      console.log('BASE_API2', BASE_FILE_URL)

      // 默认拼接文件服务器路径
      return BASE_FILE_URL + imageUrl;
    },

    /** 处理图片URL显示 */
    getDisplayImageUrl(imageUrl) {
      if (!imageUrl) return '';
      
      // 如果禁用了自动拼接，直接返回原始URL
      if (!this.autoAppendUrl) {
        return imageUrl;
      }
      
      // 对于base64图片，直接返回
      if (imageUrl.startsWith('data:image/')) {
        return imageUrl;
      }
      
      // 对于完整URL，直接返回
      if (/^(http|https):\/\//.test(imageUrl)) {
        return imageUrl;
      }
      
      // 其他情况使用完整URL拼接逻辑
      return this.getFullImageUrl(imageUrl);
    },

    /** 图片加载成功 */
    onImageLoad() {
      this.imageLoading = false
      this.imageError = false
      // 异步获取图片尺寸，避免阻塞UI
      this.$nextTick(() => {
        this.getImageSize()
      })
    },

    /** 图片加载失败 */
    onImageError() {
      this.imageLoading = false
      this.imageError = true
      this.imageDimensions = null
      console.warn('图片加载失败:', this.imageUrl)
    },

    /** 覆盖默认的上传行为 */
    requestUpload() {
      // 空实现，阻止默认上传
    },

    /** 打开裁剪器 */
    openCropper() {
      if (this.imageUrl) {
        console.log('打开裁剪器 - 原始图片URL:', this.imageUrl)
        
        // 确保裁剪器配置正确
        const displayUrl = this.getDisplayImageUrl(this.imageUrl)
        this.cropperOptions.img = displayUrl
        this.cropperOptions.filename = this.cropperOptions.filename || "image"
        
        console.log('裁剪器配置:', {
          img: this.cropperOptions.img,
          displayUrl: displayUrl,
          autoAppendUrl: this.autoAppendUrl
        })
        
        // 标记为编辑已有图片
        this.isNewImage = false
        
        // 重置裁剪器状态
        this.cropperVisible = false
        this.cropperOpen = true
        
        // 使用单个nextTick优化性能
        this.$nextTick(() => {
          this.cropperVisible = true
          console.log('裁剪器可见性已设置为true')
        })
      } else {
        console.warn('无法打开裁剪器：图片URL为空')
      }
    },

    /** 删除图片 */
    removeImage() {
      this.$confirm('确定要删除这张图片吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.reset()
        this.$emit('image-removed')
        this.$message.success('图片已删除')
      }).catch(() => {
        // 用户取消删除
      })
    },

    /** 初始化裁剪器 */
    initCropper() {
      console.log('开始初始化裁剪器')
      
      if (this.$refs.cropper) {
        console.log('裁剪器实例存在，当前配置:', {
          img: this.cropperOptions.img ? '已设置' : '未设置',
          visible: this.cropperVisible,
          open: this.cropperOpen
        })
        
        // 确保图片URL正确设置
        if (this.cropperOptions.img && this.cropperOptions.img !== this.$refs.cropper.img) {
          this.$refs.cropper.img = this.cropperOptions.img
          console.log('裁剪器图片URL已更新')
        }
        
        // 使用requestAnimationFrame优化刷新
        requestAnimationFrame(() => {
          this.$refs.cropper.refresh()
          console.log('裁剪器已刷新，图片URL:', this.cropperOptions.img ? '已设置' : '未设置')
        })
      } else {
        console.warn('裁剪器实例未找到，等待组件挂载')
        // 如果裁剪器实例不存在，延迟重试
        setTimeout(() => {
          this.initCropper()
        }, 100)
      }
    },

    /** 获取图片尺寸信息（优化版本） */
    getImageSize() {
      if (!this.imageUrl) return ''
      
      // 检查缓存
      if (this.imageSizeCache.has(this.imageUrl)) {
        const cached = this.imageSizeCache.get(this.imageUrl)
        this.imageDimensions = cached.dimensions
        this.imageError = cached.error
        return cached.dimensions ? `${cached.dimensions.width} × ${cached.dimensions.height}` : '图片加载失败'
      }
      
      // 设置加载状态
      this.imageLoading = true
      this.imageError = false
      
      const loadImage = (src) => {
        return new Promise((resolve, reject) => {
          const img = new Image()
          img.onload = () => {
            const dimensions = {
              width: img.width,
              height: img.height
            }
            this.imageDimensions = dimensions
            this.imageLoading = false
            
            // 缓存结果
            this.imageSizeCache.set(this.imageUrl, {
              dimensions,
              error: false
            })
            
            resolve(dimensions)
          }
          img.onerror = () => {
            this.imageDimensions = null
            this.imageLoading = false
            this.imageError = true
            
            // 缓存错误结果
            this.imageSizeCache.set(this.imageUrl, {
              dimensions: null,
              error: true
            })
            
            reject(new Error('图片加载失败'))
          }
          img.src = src
        })
      }
      
      // 异步加载图片尺寸
      const imageSrc = this.imageUrl.startsWith('data:image') 
        ? this.imageUrl 
        : this.getDisplayImageUrl(this.imageUrl)
      
      loadImage(imageSrc).catch(() => {
        console.warn('图片尺寸获取失败:', this.imageUrl)
      })
      
      // 返回当前状态
      if (this.imageDimensions) {
        return `${this.imageDimensions.width} × ${this.imageDimensions.height}`
      }
      
      return this.imageError ? '图片加载失败' : '图片已上传'
    },

    /** 上传预处理 */
    beforeUpload(file) {
      // 检查文件类型
      if (file.type.indexOf("image/") == -1) {
        this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
        return false
      }
      
      // 检查文件大小
      const isLtMax = file.size / 1024 / 1024 < this.maxFileSize
      if (!isLtMax) {
        this.$modal.msgError(`图片大小不能超过 ${this.maxFileSize}MB!`)
        return false
      }
      
      // 读取文件并打开裁剪器（不立即设置imageUrl）
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        console.log('文件读取完成，准备打开裁剪器')
        
        // 只设置裁剪器配置，不设置imageUrl
        this.cropperOptions.img = reader.result
        this.cropperOptions.filename = file.name
        
        console.log('裁剪器配置已设置:', {
          img: this.cropperOptions.img ? '已设置' : '未设置',
          filename: this.cropperOptions.filename
        })
        
        // 标记为新建图片
        this.isNewImage = true
        
        // 打开裁剪器
        this.cropperOpen = true
        
        // 使用nextTick确保对话框打开后再显示裁剪器
        this.$nextTick(() => {
          this.cropperVisible = true
          console.log('裁剪器可见性已设置为true')
        })
      }
      return false // 阻止默认上传
    },

    /** 打开弹出层结束时的回调 */
    modalOpened() {
      console.log('对话框已打开，开始初始化裁剪器')
      
      // 确保裁剪器可见
      this.cropperVisible = true
      
      // 延迟初始化裁剪器，确保DOM已完全渲染
      this.$nextTick(() => {
        // 使用防抖优化裁剪器初始化
        this.initCropperDebounced()
      })
      
      if (!this.resizeHandler) {
        this.resizeHandler = debounce(() => {
          this.refresh()
        }, 200) // 增加防抖时间
      }
      window.addEventListener("resize", this.resizeHandler)
    },

    /** 刷新组件 */
    refresh() {
      if (this.$refs.cropper) {
        this.$refs.cropper.refresh()
      }
    },

    /** 向左旋转 */
    rotateLeft() {
      if (this.$refs.cropper) {
        this.$refs.cropper.rotateLeft()
      }
    },

    /** 向右旋转 */
    rotateRight() {
      if (this.$refs.cropper) {
        this.$refs.cropper.rotateRight()
      }
    },

    /** 图片缩放 */
    changeScale(num) {
      if (this.$refs.cropper) {
        num = num || 1
        this.$refs.cropper.changeScale(num)
      }
    },

    /** 上传图片（裁剪完成后） */
    uploadImg() {
      if (!this.$refs.cropper) {
        this.$modal.msgError("裁剪器未初始化")
        return
      }
      
      this.$refs.cropper.getCropBlob(blob => {
        if (!blob) {
          this.$modal.msgError("裁剪失败，请重试")
          return
        }
        
        this.croppedImageBlob = blob
        // 预览用base64
        const reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = () => {
          // 更新图片URL和v-model值
          this.imageUrl = reader.result
          this.$emit('input', reader.result)
          
          // 关闭裁剪器
          this.cropperOpen = false
          this.cropperVisible = false
          
          // 重置裁剪器配置和状态
          this.cropperOptions.img = ""
          this.isNewImage = false
          
          // 获取图片尺寸
          const img = new Image()
          img.onload = () => {
            this.imageDimensions = {
              width: img.width,
              height: img.height
            }
            // 更新缓存
            this.imageSizeCache.set(this.imageUrl, {
              dimensions: this.imageDimensions,
              error: false
            })
          }
          img.src = reader.result
          
          // 触发裁剪完成事件，返回blob和base64
          this.$emit('image-cropped', blob, reader.result)
          this.$modal.msgSuccess("图片裁剪成功")
        }
        reader.onerror = () => {
          this.$modal.msgError("图片处理失败")
        }
      })
    },



    /** 关闭裁剪窗口 */
    closeCropperDialog() {
      this.cropperVisible = false
      
      // 如果是新建图片且用户取消裁剪，清理状态
      if (this.isNewImage) {
        this.cropperOptions.img = ""
        this.isNewImage = false
      }
      
      if (this.resizeHandler) {
        window.removeEventListener("resize", this.resizeHandler)
      }
    },



    /** 获取裁剪后的图片blob */
    getCroppedImageBlob() {
      return this.croppedImageBlob
    },

    /** 获取裁剪后的图片数据 */
    getCroppedImageData() {
      return {
        blob: this.croppedImageBlob,
        base64: this.imageUrl,
        filename: this.cropperOptions.filename,
        // 添加原始URL和完整URL
        originalUrl: this.imageUrl,
        fullUrl: this.getDisplayImageUrl(this.imageUrl)
      }
    },

    /** 获取图片完整信息 */
    getImageInfo() {
      return {
        url: this.imageUrl,
        fullUrl: this.getDisplayImageUrl(this.imageUrl),
        dimensions: this.imageDimensions,
        blob: this.croppedImageBlob,
        filename: this.cropperOptions.filename,
        isValid: this.isImageValid()
      }
    },

    /** 检查图片是否有效 */
    isImageValid() {
      if (!this.imageUrl) return false
      
      // base64图片
      if (this.imageUrl.startsWith('data:image/')) {
        return true
      }
      
      // 网络图片
      if (/^(http|https):\/\//.test(this.imageUrl)) {
        return true
      }
      
      // 相对路径图片
      return this.imageUrl.length > 0
    },

    /** 重置组件 */
    reset() {
      this.imageUrl = ""
      this.croppedImageBlob = null
      this.cropperOptions.img = ""
      this.cropperOptions.filename = "image"
      this.imageDimensions = null
      this.imageLoading = false
      this.imageError = false
      this.isNewImage = false
      
      // 清理缓存
      this.imageSizeCache.clear()
      
      // 重置裁剪器状态
      this.cropperVisible = false
      this.cropperOpen = false
    },
  }
}
</script>

<style scoped lang="scss">
.image-cropper-component {
  .upload-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    // 图片预览容器
    .image-preview-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
      
      .image-preview {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
          
          .image-overlay {
            opacity: 1;
          }
        }
        
        .preview-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
        
        .image-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s ease;
          
          .overlay-actions {
            display: flex;
            gap: 8px;
            
            .edit-btn {
              background: linear-gradient(135deg, #409eff, #66b1ff);
              border: none;
              color: #fff;
              
              &:hover {
                background: linear-gradient(135deg, #66b1ff, #85c1ff);
                transform: scale(1.05);
              }
            }
            
            .remove-btn {
              background: linear-gradient(135deg, #f56c6c, #f78989);
              border: none;
              color: #fff;
              
              &:hover {
                background: linear-gradient(135deg, #f78989, #fab6b6);
                transform: scale(1.05);
              }
            }
          }
        }
      }
      
      .image-info {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        
        // 正常状态
        &:not(.error) {
          background: linear-gradient(135deg, #f0f9ff, #e6f7ff);
          border: 1px solid #b3d8ff;
          color: #409eff;
        }
        
        // 错误状态
        &.error {
          background: linear-gradient(135deg, #fef0f0, #fde2e2);
          border: 1px solid #fbc4c4;
          color: #f56c6c;
        }
        
        .image-size {
          display: flex;
          align-items: center;
          gap: 4px;
          
          &::before {
            content: '📐';
            font-size: 14px;
          }
        }
        
        .error-icon {
          margin-right: 4px;
          font-size: 14px;
        }
      }
    }
    
    .upload-area {
      .upload-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 240px;
        height: 135px;
        border: 2px dashed #dcdfe6;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        background: linear-gradient(135deg, #fafafa, #f5f7fa);
        position: relative;
        overflow: hidden;
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(64, 158, 255, 0.1), transparent);
          transition: left 0.5s ease;
        }
        
        &:hover {
          border-color: #409eff;
          background: linear-gradient(135deg, #f0f9ff, #e6f7ff);
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
          
          &::before {
            left: 100%;
          }
          
          .upload-icon-wrapper {
            transform: scale(1.1);
            background: linear-gradient(135deg, #409eff, #66b1ff);
          }
          
          .upload-text {
            color: #409eff;
          }
        }
        
        .upload-icon-wrapper {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: linear-gradient(135deg, #409eff, #66b1ff);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 16px;
          transition: all 0.3s ease;
          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
          
          .upload-icon {
            font-size: 24px;
            color: #fff;
            transition: all 0.3s ease;
          }
        }
        
        .upload-text {
          font-size: 16px;
          color: #606266;
          margin-bottom: 8px;
          font-weight: 600;
          transition: all 0.3s ease;
        }
        
        .upload-tip {
          font-size: 12px;
          color: #909399;
          text-align: center;
          line-height: 1.4;
          max-width: 180px;
        }
      }
    }
    
    // 上传状态提示
    .upload-status {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: #f0f9ff;
      border: 1px solid #b3d8ff;
      border-radius: 6px;
      font-size: 12px;
      color: #409eff;
      
      .status-icon {
        font-size: 14px;
      }
    }
  }
}

// 裁剪对话框样式
.cropper-dialog {
  .el-dialog__body {
    padding: 24px;
  }
  
  .cropper-container {
    border: 2px solid #e4e7ed;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: #fff;
    position: relative;
    height: 100%;
    overflow: visible;
    padding: 20px;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%), 
                  linear-gradient(-45deg, #f8f9fa 25%, transparent 25%), 
                  linear-gradient(45deg, transparent 75%, #f8f9fa 75%), 
                  linear-gradient(-45deg, transparent 75%, #f8f9fa 75%);
      background-size: 20px 20px;
      background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
      opacity: 0.3;
      pointer-events: none;
      z-index: 0;
    }
    
    .vue-cropper {
      position: relative;
      z-index: 1;
      height: 100%;
      width: 100%;
      
      ::v-deep .cropper-container {
        height: 100% !important;
        width: 100% !important;
      }
      
      ::v-deep .cropper-wrap-box {
        height: 100% !important;
        width: 100% !important;
      }
      
      ::v-deep .cropper-view-box {
        height: 100% !important;
        width: 100% !important;
      }
    }
  }
  

  
  .cropper-tools {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa, #f0f9ff);
    border-radius: 8px;
    border: 2px solid #e4e7ed;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    .el-row {
      align-items: center;
    }
    
    .cropper-controls {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    
    .cropper-actions {
      display: flex;
      justify-content: flex-end;
    }
    
    .el-button {
      border-radius: 6px;
      font-weight: 500;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      margin: 0 2px;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }
      
      &.el-button--primary {
        background: linear-gradient(135deg, #409eff, #66b1ff);
        border: none;
        
        &:hover {
          background: linear-gradient(135deg, #66b1ff, #85c1ff);
        }
      }
      
      &.el-button--success {
        background: linear-gradient(135deg, #67c23a, #85ce61);
        border: none;
        
        &:hover {
          background: linear-gradient(135deg, #85ce61, #95d475);
        }
      }
    }
  }
}

// 裁剪器动画
@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

// 加载状态样式
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
}



@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 裁剪对话框优化
.cropper-dialog {
  .el-dialog__header {
    background: linear-gradient(135deg, #409eff, #66b1ff);
    color: #fff;
    border-radius: 8px 8px 0 0;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
      animation: shimmer 4s infinite;
    }
  }
  
  .el-dialog__title {
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    position: relative;
    z-index: 1;
  }
  
  .el-dialog__headerbtn {
    position: relative;
    z-index: 1;
    
    .el-dialog__close {
      color: #fff;
      font-size: 18px;
      transition: all 0.3s ease;
      
      &:hover {
        color: #f0f0f0;
        transform: scale(1.1);
      }
    }
  }
  
  .el-dialog__body {
    padding: 0;
  }
  
  .el-dialog {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  }
}

// 响应式优化
@media (max-width: 768px) {
  .image-cropper-component {
    .upload-container {
      .upload-area .upload-content {
        width: 100%;
        max-width: 240px;
      }
      
      .upload-status {
        font-size: 11px;
        padding: 6px 10px;
      }
    }
  }
  
  .cropper-dialog {
    .cropper-tools {
      .cropper-controls {
        gap: 4px;
      }
    }
  }
}
</style>